<template>
	<view :style="{'--color':color}">
		<view class="top p-left50 p-right50 white"
			:style="{backgroundImage:'url(' + imgUrl + 'Uploads/private/mc_bg.png' + ')'}">
			<view class="d-flex j-sb">
				<view class="p-top30">
					<view class="size32 bold m-bot10">所有老客户(位)</view>
					<view class="size40 bold800">{{ pageData.all_guest || 0 }}</view>
				</view>
				<view class="d-flex" v-if="pageData">
					<image class="m-top30" :src="imgUrl + 'Uploads/private/code_white.png'" mode="widthFix"
						style="width: 40rpx;" @click="toUrl('/privatePage/single/codeCard')"></image>
					<view class="climate m-left40 bold text-center">
						<view class="size26">{{ pageData.chineseCalendar.term }}</view>
						<view class="size26">{{ pageData.chineseCalendar.info }}</view>
					</view>
				</view>
			</view>
			<view class="d-flex m-top30">
				<view>
					<view class="size28 m-bot10">已注册(位)</view>
					<view class="size34 bold800">{{ pageData.sign_num || 0 }}</view>
				</view>
				<view class="m-left80">
					<view class="size28 m-bot10">今日活跃(位)</view>
					<view class="size34 bold800">{{ pageData.today_active || 0 }}</view>
				</view>

			</view>
		</view>



		<view class="d-flex j-sb a-center p-right30">
			<u-tabs :list="tabList" :lineColor="color" :current="current" lineWidth="32" @click="tabClick"
				itemStyle="height: 50px;" :inactiveStyle="{color:'#777',fontSize:'32rpx',transform:'scale(1)'}"
				:activeStyle="{color:'#444',fontSize:'32rpx',fontWeight:'bold',transform:'scale(1.05)'}"></u-tabs>
			<text class="color size28" @click.stop="show = true">新加</text>
		</view>

		<block v-if="current == 0">
			<view class="p-left30 p-right30 p-bot30" v-if="pageData.members">
				<view class="cust-item p-top30 p-bot30 d-flex j-sb a-center" v-for="(item,index) in pageData.members"
					:key="index" @click="toUrl('/privatePage/client/detail?guest_id=' + item.v_id)">
					<view class="d-flex flex-1">
						<u-avatar :src="$imgUrls(item.v_headimg)" size="40"></u-avatar>
						<view class="m-left18">
							<view class="size30 color_11 m-bot10">{{ item.v_name }}</view>
							<view class="h6 color_44">{{ item.v_tel.replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2") }}
							</view>
						</view>
						<view class="m-left18 flex-1">
							<view class="m-bot10 ellipsis" v-if="item.tags">
								<text class="label white" v-for="(itm,idx) in item.tags" :key="idx"
									:style="{background: itm.color}">{{ itm.name }}</text>
							</view>
							<view class="ellipsis" v-if="item.group_name">
								<text class="label self">{{ item.group_name }}</text>
							</view>
						</view>
					</view>
					<view class="text-right" v-if="type == 1">
						<view class="h7 color_66 m-bot10">活跃值</view>
						<view class="size30 color_FF7 bold800">{{ item.browse_count || 0 }}</view>
					</view>

				</view>
			</view>

			<emptys v-else title='您还没有相关信息'></emptys>
		</block>
		<block v-if="current == 1">
			<view class="padding10-20" v-for="(item,index) in pageData.unsign_member" :key="index">
				<text class="size30" user-select>{{item}}</text>
			</view>
			<emptys v-if="!pageData.unsign_member" title='您还没有相关信息'></emptys>
		</block>

		<u-popup :show="show" @close="show = false" round="10" :overlayOpacity="0.1">
			<view class="viewboxs auto p-top30 p-bot40">
				<view class="row j-centert black size36 bold">新加</view>
				<input type="tel" class="Tel" placeholder="请输入手机号码" v-model="Tel" @focus="TipsCode = ''" />
				<view class="Tips">
					<text class="color_d0 h6">{{TipsCode}}</text>
				</view>
				<view class="Continue" @click="addClient">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				type: 1,
				imgUrl: this.imgUrl,
				pageData: '',
				current: 0,
				tabList: [{
						name: '活跃值',
						type: '1'
					},
					{
						name: '未注册',
						type: '2'
					},
				],
				show: false,
				Tel: '',
				TipsCode: '',
			}
		},
		onLoad() {
			this.initData()
		},
		methods: {
			initData() {
				this.$http.get({
					url: '/PrivateSphereApi/myGuestList',
					data: {
						type: this.type,
						is_old: 1
					}
				}).then(res => {
					if (res.code != 200) return this.$Toast(res.msg)
					this.pageData = res.data
				})
			},
			tabClick(event) {
				this.current = event.index;
			},
			addClient() {
				if (!this.Tel) return this.TipsCode = `请输入手机号码`;
				if (!this.Tel.match(this.$reg.phone)) return this.TipsCode = `手机号码输入有误`;
				this.$http.post({
					url: '/WokersApi/addOldGuest',
					data: {
						tel: this.Tel
					}
				}).then(res => {
					this.show = false
					if (res.code != 200) return this.$Toast(res.msg)
					this.$Toast(res.msg)
					this.initData()
				})
			}
		},
		computed: {
			...mapState(['color'])
		},
	}
</script>

<style lang="scss" scoped>
	.top {
		height: 280rpx;
		background-repeat: no-repeat;
		background-size: 100% auto;

		.climate {
			height: 90rpx;
			background: #4FA9FF;
			padding: 12rpx 6rpx;
			border-radius: 0rpx 0rpx 8rpx 8rpx;
		}
	}

	.cust-item {
		border-bottom: 1rpx solid #d9d9d9;

		.label {
			display: inline-block;
			padding: 0 10rpx;
			height: 34rpx;
			line-height: 34rpx;
			border-radius: 6rpx;
			font-size: 20rpx;
			margin-right: 10rpx;

			&.self {
				background: #FF6631;
				color: #fff;
			}
		}
	}

	.Tel {
		width: 100%;
		height: 80rpx;
		padding: 0 20rpx;
		border: 1rpx solid #ccc;
		margin-top: 20rpx;
		font-size: 28rpx;
		color: #000;
		border-radius: 10rpx;
	}

	.Tips {
		height: 60rpx;
		color: darkred;
		font-size: 24rpx;
		padding-left: 20rpx;
		display: flex;
		align-items: center;
	}

	.Continue {
		width: 260rpx;
		height: 80rpx;
		background-color: var(--color);
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 28rpx;
		margin: 20rpx auto;
		border-radius: 10rpx;
	}
</style>